<template>
  <div class="payOrder-con">
    <div class="w">
      <div class="pay-top">
        <h2>订单金额</h2>
        <div class="price">￥<span>{{orderMsg.price}}</span></div>
        <div class="time" v-if="time">请在<span>
            <van-count-down :time="time" format=" mm 分 ss 秒" @finish=finish />
          </span>内完成订单
        </div>
        <div class="time" v-else>请尽快完成订单,支付窗口即将关闭
        </div>
      </div>
      <!-- 订单信息 -->
      <div class="order-msg clearfix">
        <div class="left">
          <p>订单编号:</p>
          <p>收获信息:</p>
        </div>
        <div class="right">
          <p class="id">{{orderMsg.id}}</p>
          <p class="user">{{address.name}} {{address.tel}}</p>
          <p class="address">{{address.province}}{{address.city}}{{address.county}}{{address.addressDetail}}</p>
        </div>
      </div>
      <!-- 支付方式 -->
      <div class="payWay">
        <p class="title">请选择支付方式</p>
        <div class="payway-item" v-for="(item,index) in payWay" :key="index">
          <div class="img">
            <img :src="item.img" alt="">
          </div>
          <div class="name">
            {{item.name}}
          </div>
          <input type="checkbox" name="" id="" :checked="item.seleted" @change="changeSeleted(item)">
        </div>
      </div>
    </div>
    <div class="footer" @click="useMoney">
      确定支付 <span class="price">￥{{orderMsg.price}}</span>
    </div>

  </div>
</template>

<script>
export default {
  name: 'PayOrder',
  data() {
    return {
      payWay: [
        {
          name: '支付宝',
          img: 'imgs/1.png',
          seleted: false
        },
        {
          name: '微信支付',
          img: 'imgs/2.png',
          seleted: false
        },
        {
          name: '银联支付',
          img: 'imgs/3.png',
          seleted: false
        },
        {
          name: '花呗支付',
          img: 'imgs/4.png',
          seleted: false
        }
      ],
      // 订单信息
      orderMsg: {},
      // 倒计时
      time: 300000,
      // 订单id
      orderId: Number(this.$route.params.id)
    }
  },
  created() {
    this.getOrderMsg()
  },
  methods: {
    changeSeleted(i) {
      const flag = i.seleted
      this.payWay.forEach(item => (item.seleted = false))
      i.seleted = !flag
    },
    // 利用路由传递的id参数向vuex中获取当前订单的信息
    async getOrderMsg() {
      const res = await this.$store.dispatch('getOrderById', this.orderId)
      this.orderMsg = res
    },
    // 监听倒计时结束
    finish() {
      this.time = false
    },
    // 支付订单
    useMoney() {
      const flag = this.payWay.some(item => item.seleted === true)
      const that = this
      if (flag) {
        this.$dialog.confirm({
          title: '二维码',
          message: '<img src="imgs/ewm.jpg"/>',
          confirmButtonText: '支付成功',
          beforeClose(action, done) {
            if (action === 'confirm') {
              setTimeout(done, 1500)
              setTimeout(() => {
                that.$store.commit('CHANGEORDERSTATUS', that.orderId)
                that.$router.push('/succeed')
              }, 1500)
            } else {
              done()
            }
          }
        })
      } else {
        this.$dialog({ message: '请选择支付方式' })
      }
    }
  },
  computed: {
    address() {
      return this.orderMsg.address || {}
    }
  }
}
</script>

<style lang='less' scoped>
.payOrder-con {
  font-size: 28px;
  .w {
    max-width: 720px;
    margin: 0 auto;
    .pay-top {
      padding: 30px 20px;
      text-align: center;
      .price {
        margin: 25px 0 20px;
        color: #ff6600;
        span {
          font-size: 60px;
        }
      }
      .van-count-down {
        font-size: 32px;
        display: inline-block;
        margin: 0 10px;
      }
    }
    .order-msg {
      padding: 20px 40px;
      background-color: #f8f8f8;
      color: #818181;
      line-height: 44px;
      div {
        float: left;
      }
      .left {
        margin-right: 20px;
      }
    }
    .payWay {
      padding: 10px 30px 30px;
      .title {
        font-size: 30px;
        line-height: 70px;
        color: #787878;
      }
      .payway-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 90px;
        border-bottom: 1px solid #f4f4f4;
        .img {
          img {
            width: 70px;
            height: 70px;
            vertical-align: middle;
          }
        }
        .name {
          width: 100%;
          padding-left: 20px;
        }
        input {
          width: 50px;
          height: 50px;
        }
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #ff5722;
    color: #fff;
    text-align: center;
    line-height: 100px;
    font-size: 36px;
    .price {
      font-weight: 700;
    }
  }
}
</style>
